<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const bodyData = ref([
  {
    icon: '/static/images/jiuzhenren.svg',
    title: '就诊人管理',
    path: '/pages/my-service/my-patient/my-patient'
  },
  {
    icon: '/static/images/guahao.svg',
    title: '我的挂号',
    path: '/pages/my-service/my-registration/my-registration'
  },
  {
    icon: '/static/images/xinguanyimiao.svg',
    title: '新冠疫苗',
    path: '/pages/my-service/xinguan/xinguan'
  },
  {
    icon: '/static/images/hpvyimiao.svg',
    title: 'HPV疫苗',
    path: '/pages/my-service/hpv-view/hpv-view'
  },
  {
    icon: '/static/images/hesuan.svg',
    title: '核酸检测',
    path: '/pages/my-service/nucleic-acid/nucleic-acid'
  },
  {
    icon: '/static/images/tijianbaogao.svg',
    title: '我的体检',
    path: '/pages/my-service/phy-exam/phy-exam'
  },
])
const user = ref({
  avatarUrl: '',
  nickName: ''
})
const login = () => {
  uni.navigateTo({ url: '/pages/login-page/login-page' })
}
const handleNavigate = (path) => {
  uni.navigateTo({ url: path })
}
onShow(() => {
  if (uni.getStorageSync('user')) {
    user.value = uni.getStorageSync('user')
  }
  else {
    user.value = {
      avatarUrl: '/static/images/touxiang.svg',
      nickName: ''
    }
  }
})
</script>

<template>
  <view class="view">
    <view class="user">
      <image class="user-avatar" :src="user.avatarUrl" mode="aspectFill"></image>
      <view class="user-name" v-if="user.nickName">{{ user.nickName }}</view>
      <view class="user-name" v-else @click="login">登录</view>
    </view>
    <view class="header">
      <view class="header-item">
        <view class="header-item-number">5</view>
        <view class="header-item-text">健康分</view>
      </view>
      <view class="header-item">
        <view class="header-item-number">5</view>
        <view class="header-item-text">优惠券</view>
      </view>
      <view class="header-item">
        <view class="header-item-number">8</view>
        <view class="header-item-text">消息</view>
      </view>
    </view>
    <view class="body">
      <view class="body-item" v-for="(item, index) in bodyData" :key="index" @click="handleNavigate(item.path)">
        <image class="body-item-image" :src="item.icon" mode="aspectFill"></image>
        <view class="body-item-text">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .view {
    min-height: 100vh;
    background-color: #f8f8f8;
    .user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #d6e8ff;
      .user-avatar {
        margin-bottom: 20rpx;
        width: 100rpx;
        height: 100rpx;
        border: 1px solid #fff;
        border-radius: 50%;
      }
      .user-name {
        font-size: 34rpx;
      }
    }
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 50rpx 0;
      background-color: #d6e8ff;
      &::after {
        content: "";
        position: absolute;
        bottom: -150rpx;
        left: 0;
        width: 750rpx;
        height: 150rpx;
        background: linear-gradient(to bottom, #d6e8ff, transparent);
      }
      .header-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        .header-item-number {
          margin-bottom: 20rpx;
        }
      }
    }
    .body {
      position: relative;
      z-index: 100;
      display: flex;
      flex-wrap: wrap;
      margin: 0 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .body-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 20rpx 0;
        width: 25%;
        .body-item-image {
          margin-bottom: 20rpx;
          width: 60rpx;
          height: 60rpx;
        }
        .body-item-text {
          font-size: 30rpx;
        }
      }
    }
  }
</style>
